/**
 * @description 股票信息
 * @author wangjianjun
 */

import React, { PropTypes, PureComponent, Fragment } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Input, Button, message, Table, Divider, DatePicker, Select, Modal, InputNumber } from 'antd';
import { SecondHeaderC, NoDataC, NoDataGrayC } from '../../../comps';
import { fixedNum } from '../../../utils/utils';
import style from './index.less';
import { connect } from 'dva';

@Form.create()
@connect(({ stockOrderM, userM: user }) => ({
  stockOrderM,
  user,
}))
export default class StockInfor extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      span: '12px',
    };
  }

  componentDidMount() {
    this.props.dispatch({
      type: 'stockOrderM/save',
      payload: {
        stockInfor1: {
          code: '--',
          secucode: '--',
          secuabbr: '--',
          comChiname: '--',
          sindunameWind: '--',
        },
        stockInfor2: {
          status: null,
          lastpx: '--',
          highpx: '--',
          lowpx: '--',
          upDownPrices: '--',
          upDownRange: '--',
          totalvolumetrade: '--',
          totalvaluetrade: '--',
          maxpx: '--',
          minpx: '--',
        },
        flag: true,
      },
    });
  }

  render() {
    const {
      stockOrderM: { stockInfor1, stockInfor2, flag },
    } = this.props;
    const { span } = this.state;
    return (
      <div style={{ paddingLeft: '20px', paddingTop: '13px', paddingBottom: '19px' }}>
        <div style={{ height: '420px', position: 'relative' }}>
          <Row style={{ fontSize: '16px', fontWeight: 'bold' }}>
            <Col span={7}>{stockInfor1.secuabbr}</Col>

            <Col span={9}>{stockInfor1.code}</Col>
          </Row>
          <Row style={{ marginTop: span }}>
            <Col span={24}>{stockInfor1.comChiname}</Col>
          </Row>
          <Row style={{ marginTop: span }}>
            <Col span={12}>
              {stockInfor2.status == '停牌' ? (
                <span style={{ padding: '3px 10px 3px 10px', borderRadius: '3px', backgroundColor: '#999999' }}>停牌</span>
              ) : (
                <span style={{ padding: '3px 10px 3px 10px', borderRadius: '3px', backgroundColor: '#FF0100', color: 'white' }}>交易</span>
              )}
            </Col>
          </Row>
          <Row style={{ marginTop: '18px' }}>
            <Col span={12}>申万二级行业</Col>

            <Col span={12}>{stockInfor1.sindunameWind}</Col>
          </Row>
          <Row style={{ marginTop: span }}>
            <Col span={12}>最新价</Col>

            <Col span={12}>{stockInfor2.lastpx != '--' ? fixedNum(stockInfor2.lastpx, 0) : '--'}</Col>
          </Row>
          <Row style={{ marginTop: span }}>
            <Col span={12}>最高价</Col>

            <Col span={12}>
              <span style={{ color: '#FF0100' }}>{stockInfor2.highpx != '--' ? fixedNum(stockInfor2.highpx, 0) : '--'}</span>
            </Col>
          </Row>
          <Row style={{ marginTop: span }}>
            <Col span={12}>最低价</Col>

            <Col span={12}>
              <span style={{ color: '#00A62F' }}>{stockInfor2.lowpx != '--' ? fixedNum(stockInfor2.lowpx, 0) : '--'}</span>
            </Col>
          </Row>
          <Row style={{ marginTop: span }}>
            <Col span={12}>涨跌价格</Col>

            <Col span={12}>{stockInfor2.upDownPrices != '--' ? fixedNum(stockInfor2.upDownPrices, 0) : '--'}</Col>
          </Row>
          <Row style={{ marginTop: span }}>
            <Col span={12}>涨跌幅</Col>

            <Col span={12}>{stockInfor2.upDownRange}</Col>
          </Row>
          <Row style={{ marginTop: span }}>
            <Col span={12}>成交总量(股)</Col>

            <Col span={12}>{stockInfor2.totalvolumetrade != '--' ? fixedNum(stockInfor2.totalvolumetrade, 0) : '--'}</Col>
          </Row>
          <Row style={{ marginTop: span }}>
            <Col span={12}>成交金额(元)</Col>

            <Col span={12}>{stockInfor2.totalvaluetrade != '--' ? fixedNum(stockInfor2.totalvaluetrade, 0) : '--'}</Col>
          </Row>
          <Row style={{ marginTop: span }}>
            <Col span={12}>涨停价</Col>
            <Col span={12}>{stockInfor2.maxpx != '--' ? fixedNum(stockInfor2.maxpx, 0) : '--'}</Col>
          </Row>
          <Row style={{ marginTop: span }}>
            <Col span={12}>跌停价</Col>
            <Col span={12}>{stockInfor2.minpx != '--' ? fixedNum(stockInfor2.minpx, 0) : '--'}</Col>
          </Row>
          {/* {flag && <NoDataGrayC height='500px' title={'请选择证券代码，加载数据！'} />} */}
        </div>
      </div>
    );
  }
}
